<template>
  <div class="createChapterApply">
    <div style="bottom: 74px;top: 50px;position: fixed;">
    <div class="user_seal_apply">
      <van-form ref="form" :model="form"  >

        <div class="table_div" >
          <table class="basic_info_table">
            <caption>用章基本信息</caption>
            <tr>
              <th scope="col"></th>
              <th scope="col"></th>
            </tr>
            <tr>
              <td><span class="red-span">*</span>标题</td>
              <td class="tr-last-child">
                <input type="text" class="tittle" v-model="form.title" >
              </td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td>&nbsp;申请部门</td>
              <td class="tr-last-child"><span class="right_span">{{form.creatorPartyOrgName}}</span></td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td>&nbsp;申请人</td>
              <td class="tr-last-child"><span class="right_span">{{form.creatorName}}</span></td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td>&nbsp;申请人电话</td>
              <td class="tr-last-child"><span class="right_span">{{form.creatorMobile}}</span></td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td>&nbsp;用印时间</td>
              <td class="tr-last-child"><span class="right_span">{{form.chapterDate}}</span></td>
            </tr>
            <template v-if="chapterWithType">
              <tr>
                <td colspan="2">
                  <hr/>
                </td>
              </tr>

                <tr>
                <td><span class="red-span">*</span>用章类型</td>
                <td class="tr-last-child">
                  <input type="radio" name="check"  v-model="form.useSealType" value="branch"/>支部用章
                  <input type="radio" name="check"  checked
                  v-model="form.useSealType" value="partyCommittee"/>直属党委用章
                </td>
              </tr>
            </template>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>


            <tr>
              <td class="background" colspan="2"></td>
            </tr>

            <tr>
              <td colspan="2"><h2 class="table_h2">用印资料</h2></td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td><span class="red-span">*</span>用印原因</td>
              <td class="tr-last-child">
                <select ref="newText">
                    <option value="0">请选择</option>
                    <option v-for="chapterDocTypes in chapterDocTypesRes.data" :value="chapterDocTypes.value" :key="chapterDocTypes.value">
                      {{chapterDocTypes.label}}
                    </option>
                </select>
              </td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td>&nbsp;份数</td>
              <td class="tr-last-child">
                <button @click="subtractNum()">-</button>
                <span class="right_span">{{form.docNum}}</span>
                <button @click="addNum()">+</button>
              </td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td><span class="red-span">*</span>发往单位</td>
              <td class="tr-last-child">
                <textarea class="input_area" v-model="form.sendUnit" maxlength="80" />
              </td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td><span class="red-span">*</span>内容概要</td>
              <td class="tr-last-child">
                <textarea class="input_area" v-model="form.contentSummary" maxlength="400" />
              </td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td>&nbsp;用印类别</td>
              <td class="tr-last-child" style="display: flex">
                <input style="width: 10%; height: 10%" type="checkbox" checked disabled value="">
                中共中国移动通信集团浙江有限公司直属委员会
              </td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <tr>
              <td class="background" colspan="2"></td>
            </tr>

            <tr>
              <td colspan="2"><h2 class="table_h2">附件信息</h2></td>
            </tr>

            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>

            <!--    附件信息-->
            <tr>
              <td>&nbsp;办理附件</td>
              <td class="tr-last-child" >
                <van-uploader
                  multiple
                  v-model="fileList"
                  accept="application/pdf,application/xlsx,application/doc,application/docx,image/*"
                  upload-icon="plus"
                  :max-count="5"
                  :max-size="10 * 1024 * 1024"
                  @oversize="onOversize"
                  :show-upload="true"
                  :before-delete="beforeDelete"
                  :before-read="beforeRead"
                  :after-read="afterRead"
                >
                  <button>点击上传</button>
                  <span>&nbsp;&nbsp;&nbsp;不超过10M</span>
                </van-uploader>


              </td>
            </tr>
            <tr>
              <td colspan="2">
                <hr/>
              </td>
            </tr>
          </table>
        </div>

        <!-- 当前是起草，如果用章类型是直属党委用章，需要选择直属党委负责人 -->
        <div v-if="form.useSealType === 'partyCommittee'">
          <table>
            <caption style="display: none"></caption>
            <tr>
              <th scope="col">直属党委负责人</th>
              <th scope="col">
                <van-radio-group  v-model="form.partyLeaderUid" direction="horizontal">
                  <van-radio v-for="item in zsdwfdrs" :key="item.userId" :name="item.userId">{{ item.userName }}</van-radio>
                </van-radio-group>
              </th>
            </tr>
          </table>
        </div>

        <!-- 审批意见框 -->
        <div class="examInApproxOpinion">
          <h3>审批意见</h3>
        </div>
        <div class="textArea">
          <textarea v-model="form.opinion" placeholder="请输入"></textarea>
        </div>

      </van-form>
    </div>
    </div>
    <!--    页脚-->
    <div class="user_seal_apply_footer" >
      <div class="seal_work-bts-cls">
        <button @click="submitChapterApply()">
          提交
        </button>
        <button @click="backBtn()">
          返回
        </button>
      </div>

    </div>

  </div>


</template>

<script>

import API from '@/api/api-chat-list.js'
import dayjs from "dayjs";
import AesGcm from "@/utils/aesgcm";

export default {
  name: "CreateChapterApply",
  components: {},
  data() {

    return {
      //用章类型
      chapterWithType:false,
      // 弹窗消息
      popUpMsg: '',

      chapterDocOptions: [],

      // 工单状态
      status: '',

      // 按钮状态
      showDownloadApproveForm: false,
      refreshButton: false,
      workProp: {
        showBack: false,
        showSubmitDraft: false,
        showSubmit: false,
        showSave: false,
        showConfirm: false,
        showReport: false,
        showDispatch: false,
        showTransfer: false,
        showReject: false,
        showFinish: false,
        showBackToDraft: false,
        showAgree: false,
      },

      // 表单数据
      form: {
        id: '',
        title: '',
        creatorPartyOrgName: '',
        creatorMobile: '',
        creatorName: '',
        chapterDate: '',
        chapterDoc: '',
        useSealType: '', // 用章类型
        chapterDocOther: '',
        sendUnit: '',
        contentSummary: '',
        opinion: '',
        docNum: 1,
        partyLeaderUid: '',
        partyLeaderName: ''
      },
      chapterDocBefore: '',
      // 直属党委负责人
      zsdwfdrs:[],
      fileList: [],
      chapterDocTypesRes: {},
    }
  },

  methods: {
    // 文件下载
    downloadFile(id) {
      MXCommon.download( AesGcm.decrypt(process.env.VUE_APP_API_HOST) + '/api/work/downloadAttachment?attachmentId=' + id);  //下载文件
    },
    // 自动创建基本信息
    autoCreateInformation(){
      this.form.title = dayjs().format("用章申请审批YYYY-MM-DD");
      this.form.creatorPartyOrgName = this.$store.state.userInfo.partyOrgName;
      this.form.creatorMobile = this.$store.state.userInfo.mobilePhone;
      this.form.creatorName = this.$store.state.userInfo.userName;
      this.form.chapterDate = '提交后自动生成';
    },
    // 减少份数
    subtractNum(){
      this.form.docNum = this.form.docNum - 1 > 0 ? this.form.docNum - 1 : 1;
    },
    // 增加份数
    addNum(){
      this.form.docNum = this.form.docNum + 1;
    },
    onOversize() {
      this.$toast('图片大小不能超过 10Mb')
    },
    //删除前的回调
    beforeDelete(file, detail) {
      //删除的附件从fileList中删掉
      this.fileList.splice(detail.index, 1);
    },
    beforeRead(file) {

      return true
    },
    afterRead(file, detail) {

    },
    // 获取用印资料类型
    async getChapterDocTypes() {
      this.chapterDocTypesRes = await API.getChapterDocTypes();
    },
    // 通用确认框与请求发送
    async submitChapterApply() {
      if(!this.form.title || this.$refs.newText.value === '0' || !this.form.sendUnit || !this.form.contentSummary){
        this.$toast.fail("请确认必填项内容是否填写");
        return false;
      }
      const param = new FormData();
      // 如果是直属党委用章，需要选择直属党委负责人，并且将选中的值传到后台
      if (this.form.useSealType === 'partyCommittee') {
        // 如果直属党委负责人为空，需要提示必选
        if(!this.form.partyLeaderUid) {
          this.$toast.fail("请选择直属党委负责人");
          return false;
        }
        param.append('partyLeaderUid', this.form.partyLeaderUid);
        const fzr = this.zsdwfdrs.find(item => item.userId === this.form.partyLeaderUid);
        param.append('partyLeaderName', fzr.userName);
        this.form.partyLeaderName = fzr.userName;
      }
      // 下一审批人信息
      const workApplyInfo = {
        title: this.form.title,
        creatorPartyOrgName: this.form.creatorPartyOrgName,
        creatorMobile: this.form.creatorMobile,
        creatorName: this.form.creatorName,
        chapterDoc: this.$refs.newText.value,
        sendUnit: this.form.sendUnit,
        contentSummary: this.form.contentSummary,
        opinion: this.form.opinion,
        docNum: this.form.docNum,
        creatorDeptDn: this.$store.state.userInfo.departmentDN,
        creatorDeptName: this.$store.state.userInfo.deptName,
        creatorUid: this.$store.state.userInfo.userID,
        useSealType: this.form.useSealType,
        partyLeaderUid: this.form.partyLeaderUid,
        partyLeaderName: this.form.partyLeaderName
      };
      param.append('workApplyId','');
      param.append('workApplyInfo',JSON.stringify(workApplyInfo));
      param.append('decision','submit');

      const resultData = await API.chapterNextNodeInfo(param);
      // 弹窗信息
      this.popUpMsg = '确认将工单提交给' + resultData.data.userInfo.userName + '('+ resultData.data.nodeName +')吗';
      const dialog = await this.$dialog.confirm({
        title: '',
        message: this.popUpMsg,
        confirmButtonColor: 'red',
        theme: 'round-button',
      });

      if(dialog === "confirm"){
        const fd = new FormData();
        fd.append('workApplyInfo',JSON.stringify(workApplyInfo));
        fd.append('opinion',this.form.opinion + "(手机)");
        this.fileList.forEach(item => {
          fd.append('file',item.file);
        })
        await API.submitChapterDraft(fd);
        this.$router.back();
      }
    },
    backBtn(){
      this.$router.back();
    },
  },

  // 初始化数据
  async created() {
    await this.getChapterDocTypes();
    this.autoCreateInformation();
    const chapterWithTypeData = await API.getRoles();
    this.chapterWithType = chapterWithTypeData.data.includes("partyCommittee");
    if (this.chapterWithType) {
      this.form.useSealType = 'branch';
    }
    // 加载直属党委负责人可选列表
    const zsdwfzrRes = await API.getZsdwfzr();
    this.zsdwfdrs = zsdwfzrRes.data;
  },
}
</script>

<style>


.user_seal_apply {
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 100;
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  width: 100%;
  margin: 0 auto;
}

.table_div {
  text-align: center;
  background-color: #fff9f9;
  padding: 0.8em 0;
}

.background {
  background-color: #fff9f9;
}

.table_h2 {
  text-align: center;
  padding-top: 5px;
  font-size: 1.2em;
}

.tr-last-child input, .tr-last-child textarea, .tr-last-child button{
  background-color: #f7f7f7;
}

/*分割线*/
.user_seal_apply hr {
  border: none;
  border-bottom: 1px solid #DaDaDa;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
}


/*主体表格*/
.table_div .basic_info_table{
  width: 100%;
  margin: auto;
  background-color: white;
}

.basic_info_table caption {
  display: none;
}

/*所有行*/
.user_seal_apply td {
  font-size: 13px;
  padding: 6px 10px;
}

.user_seal_apply .red-span {
  color: red;
}


/*左列*/
.user_seal_apply tr > td:first-child, .user_seal_apply tr > th:first-child {
  text-align: left;
  width: 30%;
  font-weight: bold;
  font-size: 0.9em;
  vertical-align: middle;
}

.tr-last-child input{
  border: 1px solid  pink!important;
  box-shadow: 0 0 6px #dcdfe6;
}

.tr-last-child button{
  border: 1px solid gray;
  padding: 4px 8px;
  border-radius: 3px;
}

/*右列*/
.basic_info_table .tr-last-child {
  text-align: right;
}

/*可拉输入框*/
.user_seal_apply textarea {
  color: #606266;
  border-radius: 5px;
}

/*审批意见*/
.user_seal_apply .examInApproxOpinion {
  background-color: white;
  padding-bottom: 0.2em;
}

.examInApproxOpinion h3{
  font-size: 1.1em;
  margin: 1em auto;
  padding-top: 1em;
  text-align: center;
}

.user_seal_apply .textArea {
  width: 100%;
  background-color: #fff;
}

.user_seal_apply .textArea textarea{
  display: block;
  resize: vertical;
  padding: 5px 15px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 90%;
  margin: 0 auto;
  font-size: inherit;
  color: #606266;
  background-color: #f7f7f7;
  min-height: 8em;
  border: 1px solid gray;
  border-radius: 4px;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}

.input_area{
  width: 90%;
  resize: none;
  height: 3em;
  border: 1px solid  pink!important;
  box-shadow: 0 0 6px #dcdfe6;
}

.tittle {
  width: 95%;
  padding: 5px 1px;
  border-radius: 5px;
  border: 1px solid red;
}

.createChapterApply .tr-last-child select {
  padding: 5px 1px;
  border-radius: 5px;
  border: 1px solid  pink!important;
  box-shadow: 0 0 6px #dcdfe6;
  background-color: #f7f7f7;
  height: 30px;
}

/*办理附件*/
.user_seal_apply .handAttach{
  text-align: left;
}

/*页脚*/
.user_seal_apply_footer {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  z-index: 1000;
  height: 4em;
  box-shadow: 0 0 23px rgb(145 43 43 / 12%);
}

.user_seal_apply_footer  button {
  padding: 0.5em 1em;
  width: 60%;
  margin: 0.7em;
  background-color: #FFFFFF;
  border-radius: 5px;
  border: 1px solid #ED2439;
  color: #ED2439;
}

.user_seal_apply_footer .seal_work-bts-cls {
  display: flex;
  justify-content: center;
}

.right_span {
  padding: 0 5px;
}

</style>
